<script setup>
import {ref, inject} from 'vue'
import {ElTreeSelect, ElNotification, ElMessage} from 'element-plus'
import Vue3TagsInput from "@/components/Vue3TagsInput/Vue3TagsInput.vue"
import axios from 'axios'
import AvatarCropper from './AvatarCropper.vue'

const userinfo=inject("userinfo")
const model=defineModel()
const talent_audit=defineModel('talent_audit')

//头像
const avatar_name=ref('')
var avatar_name_origin=''
const model_select_avatar=ref(false)
if(talent_audit.value!=null){
  avatar_name.value=talent_audit.value.photo
  avatar_name_origin=talent_audit.value.photo
}
function handleUploadAvatar(){
  model_select_avatar.value=true
}

//头衔
const ref_titles=ref()
const titles=ref([])
var titles_origin=[]
if(talent_audit.value!=null){
  titles.value=talent_audit.value.titles
  titles_origin=talent_audit.value.titles
}
function handleChangeTitles(value){
  titles.value=value
}

//擅长领域
const ref_level2s=ref()
const level2s=ref([])
var level2s_origin=[]
if(talent_audit.value!=null){
  talent_audit.value.level2s.map(level2=>{
    level2s.value.push(level2.id)
    level2s_origin.push(level2.id)
  })
}
const levels=ref() //存放产业链二级目录结构
axios.get('/api/levels').then(ret=>{
  ret.data.map(level1=>{
    level1.value=level1.id+'|' //避免tag-input控件中level2选中时，id相同的level1也显示被选中状态
    level1.label=level1.name
    level1.level2.map(level2=>{
        level2.value=level2.id
        level2.label=level2.name
        delete level2.id
        delete level2.name
    })
    level1.children=structuredClone(level1.level2)
    delete level1.id
    delete level1.name
    delete level1.level2
  })
  levels.value=ret.data
}).catch(e=>{
  ElNotification({
    title:"错误",
    message:"无法从服务器获取产业链类别",
    type:'error'
  })
})

//成果简介
const ref_achievements=ref()
const achievements=ref('')
var achievements_origin=''
if(talent_audit.value!=null){
  achievements.value=talent_audit.value.achievements
  achievements_origin=talent_audit.value.achievements
}

//按钮
function handleCancle(){
  model.value=false
}
function handleReset(){
  avatar_name.value=avatar_name_origin
  titles.value=titles_origin
  level2s.value=level2s_origin
  achievements.value=achievements_origin
}
function handleSubmit(){
  if(avatar_name.value=='')
  {
    ElMessage({
      type:"warning",
      message:"请选择证件照！"
    })
    return
  }
  if(titles.value.length==0){
    ElMessage({
      type:"warning",
      message:"请填写专家头衔！"
    })
    ref_titles.value.$el.childNodes[0].childNodes[2].focus()
    return
  }
  if(level2s.value.length==0){
    ElMessage({
      type:"warning",
      message:"请选择擅长领域！"
    })
    ref_level2s.value.focus()
    return
  }
  if(achievements.value==''){
    ElMessage({
      type:"warning",
      message:"请填写成果简介！"
    })
    ref_achievements.value.focus()
    return
  }
  var a=avatar_name_origin==avatar_name.value
  var b=titles_origin.sort().toString()==titles.value.sort().toString()
  var c=level2s_origin.sort().toString()==level2s.value.sort().toString()
  var d=achievements_origin==achievements.value
  if(a&b&c&d){
    ElMessage({
      type:"warning",
      message:"信息未修改！"
    })
    return
  }
  axios.post(
    '/api/talent_audit/register',
    {
      user_id:userinfo.value.id,
      photo:avatar_name.value,
      titles:titles.value,
      level2s:level2s.value,
      achievements:achievements.value
    }
  ).then(ret=>{
    talent_audit.value=ret.data
    model.value=false
  }).catch(e=>{
    ElNotification({
      title:"错误",
      message:"服务器错误",
      type:'error'
    })
    console.log(e)
  })
}

//点击弹窗以外区域，关闭弹窗
const main=ref(null)
function handleClose(e){
  if(!main.value.contains(e.target)){
    model.value=false
  }
}
</script>

<template>
<transition name="el-fade-in-linear">
  <div class="parent" @click.stop="handleClose($event)">
      <div class="child" ref="main">
          <div class="header">
            注册专家信息
          </div>
          <div class="avatar-container">
            <div style="display:flex; flex-direction:column;"> 
                <el-image style="width:100px; height:130px;" :src="'/minio/talent-avatar/'+avatar_name" fit="fill">
                    <template #error>
                        <div class="avatar"></div>
                    </template>
                </el-image>
                <div class="avatar-edit" @click="handleUploadAvatar">
                    选择证件照
                </div>
                <AvatarCropper v-if="model_select_avatar"  v-model="model_select_avatar" v-model:avatar_name="avatar_name"/>
            </div>
          </div>
          <div class="title">
            请输入您的头衔：
          </div>
          <vue3-tags-input
            ref="ref_titles"
            :tags="titles"
            placeholder="按回车确认"
            @on-tags-changed="handleChangeTitles"
            class="tags-editable"
          />
          <div class="title">
            请选择您擅长的领域：
          </div>
          <el-tree-select
            ref="ref_level2s"
            v-model="level2s"
            :data="levels"
            multiple
            class="tree-select"
          />
          <div class="title">
              请输入您的成果简介：
          </div>
          <el-input
            ref="ref_achievements"
            v-model="achievements"
            :rows="5"
            type="textarea"
          />
          <div class="operations">
              <el-button @click="handleCancle">取消</el-button>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSubmit">确定</el-button>
          </div>
      </div>
  </div>
</transition>
</template>

<style lang="scss" scoped>
.parent{
    z-index:100;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color: rgba(128,128,128,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    .child{
        width:300px;
        height:auto;
        background-color: white;
        border-radius:10px;
        box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
        .header{
            padding:5px;
            font-weight:bolder;
            font-size:medium;
            text-align:center;
            color: var(--el-color-white);
            background-color: var(--el-color-primary);
            border-radius:10px 10px 0 0;
        }
        .avatar-container{
          display:flex;
          justify-content:center;
          margin:10px;
          .avatar{
              width:100px;
              height:130px;
              background:url('data:image/svg+xml;utf8,%3C%73%76%67%20%76%69%65%77%42%6F%78%3D%22%30%20%30%20%31%30%32%34%20%31%30%32%34%22%20%76%65%72%73%69%6F%6E%3D%22%31%2E%31%22%20%78%6D%6C%6E%73%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%77%33%2E%6F%72%67%2F%32%30%30%30%2F%73%76%67%22%20%70%2D%69%64%3D%22%34%37%33%35%22%20%77%69%64%74%68%3D%22%31%30%30%22%20%68%65%69%67%68%74%3D%22%31%30%30%22%3E%3C%70%61%74%68%20%64%3D%22%4D%39%33%38%2E%35%35%37%34%34%20%37%39%36%2E%38%36%36%35%36%6C%2D%32%32%35%2E%39%39%36%38%2D%38%38%2E%30%37%34%32%34%63%30%20%30%2D%34%33%2E%31%30%30%31%36%2D%31%36%2E%37%33%32%31%36%2D%35%39%2E%38%34%32%35%36%2D%33%33%2E%31%38%37%38%34%2D%31%30%2E%37%36%32%32%34%2D%31%30%2E%35%37%37%39%32%2D%39%2E%39%38%34%2D%33%35%2E%35%33%32%38%2D%30%2E%34%36%30%38%2D%36%37%2E%34%30%39%39%32%73%31%32%35%2E%33%37%38%35%36%2D%31%36%31%2E%34%32%33%33%36%20%31%32%35%2E%33%37%38%35%36%2D%32%37%39%2E%31%30%31%34%34%43%37%37%37%2E%36%33%35%38%34%20%31%34%37%2E%33%35%33%36%20%36%35%38%2E%31%35%35%35%32%20%30%20%35%31%30%2E%37%38%31%34%34%20%30%20%33%36%33%2E%34%31%37%36%20%30%20%32%34%33%2E%39%34%37%35%32%20%31%34%37%2E%33%35%33%36%20%32%34%33%2E%39%34%37%35%32%20%33%32%39%2E%31%30%33%33%36%63%30%20%31%31%32%2E%37%31%31%36%38%20%31%30%33%2E%32%33%39%36%38%20%32%34%37%2E%30%38%30%39%36%20%31%31%35%2E%39%37%38%32%34%20%32%37%31%2E%35%30%33%33%36%20%31%32%2E%37%34%38%38%20%32%34%2E%34%32%32%34%20%39%2E%36%34%36%30%38%20%36%31%2E%36%34%34%38%2D%30%2E%34%31%39%38%34%20%37%32%2E%39%31%39%30%34%2D%31%35%2E%31%31%34%32%34%20%31%36%2E%39%33%36%39%36%2D%37%30%2E%33%33%38%35%36%20%33%33%2E%39%31%34%38%38%2D%37%30%2E%33%33%38%35%36%20%33%33%2E%39%31%34%38%38%4C%38%35%2E%34%33%32%33%32%20%37%39%38%2E%32%33%38%37%32%63%2D%34%37%2E%35%39%35%35%32%20%31%37%2E%31%30%30%38%2D%38%34%2E%38%38%39%36%20%36%31%2E%39%39%32%39%36%2D%38%34%2E%38%38%39%36%20%31%31%32%2E%36%34%6C%30%20%32%34%2E%30%32%33%30%34%63%30%20%35%35%2E%32%37%35%35%32%20%34%34%2E%38%39%32%31%36%20%38%39%2E%30%39%38%32%34%20%31%30%30%2E%30%36%35%32%38%20%38%39%2E%30%39%38%32%34%6C%33%34%31%2E%37%30%38%38%20%30%20%31%31%37%2E%31%32%35%31%32%20%30%20%33%36%33%2E%39%33%39%38%34%20%30%63%35%35%2E%31%38%33%33%36%20%30%20%31%30%30%2E%30%37%35%35%32%2D%33%33%2E%38%32%32%37%32%20%31%30%30%2E%30%37%35%35%32%2D%38%39%2E%30%39%38%32%34%6C%30%2D%32%34%2E%30%32%33%30%34%43%31%30%32%33%2E%34%35%37%32%38%20%38%36%30%2E%32%32%31%34%34%20%39%38%36%2E%31%36%33%32%20%38%31%33%2E%39%35%37%31%32%20%39%33%38%2E%35%35%37%34%34%20%37%39%36%2E%38%36%36%35%36%4C%39%33%38%2E%35%35%37%34%34%20%37%39%36%2E%38%36%36%35%36%7A%4D%39%33%38%2E%35%35%37%34%34%20%37%39%36%2E%38%36%36%35%36%22%20%66%69%6C%6C%3D%22%23%32%37%32%36%33%36%22%20%70%2D%69%64%3D%22%34%37%33%36%22%20%64%61%74%61%2D%73%70%6D%2D%61%6E%63%68%6F%72%2D%69%64%3D%22%61%33%31%33%78%2E%73%65%61%72%63%68%5F%69%6E%64%65%78%2E%30%2E%69%35%2E%34%62%30%35%33%61%38%31%5A%70%51%4A%5A%69%22%20%63%6C%61%73%73%3D%22%73%65%6C%65%63%74%65%64%22%3E%3C%2F%70%61%74%68%3E%3C%2F%73%76%67%3E') no-repeat center;
          }
          .avatar-edit{
              margin-top:-20px;
              background:gray;
              opacity:0.8;
              width:100px;
              text-align:center;
              color:white;
              font-size:small;
              cursor:pointer;
          }
        }
        .title{
            margin:10px;
        }
        .tags-editable{
            margin:10px;
            min-height:100px;
            :deep(.v3ti-new-tag){
                min-width:80px;
                color:var(--el-color-warning);
            };
            :deep(.v3ti-tag){
                background-color:var(--el-color-warning);
            };
        }
        .tree-select{
            margin-left:10px;
            width:280px;
            :deep(.el-tag){
                background-color:var(--el-color-warning);
                color:var(--el-color-white);
            }
        }
        .el-textarea{
            margin-left:10px;
            width:280px;
            :deep(.el-textarea__inner){
                color:var(--el-color-warning);
            }
        }
        .operations{
            margin:15px 0;
            text-align: center;
        }
    }
}
</style>